<template>
  <el-dialog :model-value="showGroupDialog" title="题库选择" width="800" @close="closeDialog" :close-on-click-modal="false">
    <el-table :data="tableData" row-key="id" :tree-props="{ checkStrictly: false }"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" :selectable="isRootRow" />

      <el-table-column prop="id" label="ID" width="120" />
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="carIds" label="车型">
        <template #default="scope">
          <div v-if="scope.row.parentId === '0' && scope.row.carIds">{{ scope.row.carName }}({{ scope.row.carTypes }})
          </div>
          <div v-else></div>
        </template>
      </el-table-column>

      <el-table-column prop="categoryIds" label="科目">
        <template #default="scope">
          <div v-if="scope.row.parentId === '0'">
            <el-button v-if="scope.row.categoryIds === '1'" round size="small" plain>科目一</el-button>
            <el-button v-if="scope.row.categoryIds === '2'" round size="small" plain>科目二</el-button>
            <el-button v-if="scope.row.categoryIds === '3'" round size="small" plain>科目三</el-button>
            <el-button v-if="scope.row.categoryIds === '4'" round size="small" plain>科目四</el-button>
          </div>
          <div v-else></div>
        </template>
      </el-table-column>

      <el-table-column prop="question" label="题目数量">
        <template #default="scope">
          <span>{{ scope.row.questionCount }}</span>
        </template>
      </el-table-column>
    </el-table>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog" style="margin-right: 10px">关闭</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { getcategoryList } from '@/api/questionbanklabel'

const props = defineProps({
  showGroupDialog: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['closeDialog'])
const selectVideo = ref([])
const tableData = ref([])

const isRootRow = (row: any) => String(row.parentId) === '0'

async function getData() {
  try {
    const res = await getcategoryList.getcategoryId({
      pageNum: 1,
      pageSize: 1000
    })
    if (res.code === '00000') {
      tableData.value = res.data.list
    }
  } catch (e) {
  } finally {
  }
}

function handleSelectionChange(item: any) {
  selectVideo.value = item
}

function closeDialog() {
  emit('closeDialog')
}

function handleConfirm() {
  emit('closeDialog', selectVideo.value)
}

onMounted(() => {
  getData()
})
</script>

<style scoped lang="scss"></style>
